<template>
	<view>
		<view class="banner">
			<view class="marquee_container" style="--marqueeWidth--:-12em">
				<view class="marquee_text">{{marquee}}</view>
			</view>
			<u-swiper :list="list" :autoplay="false" mode="none" border-radius="0" height="300"></u-swiper>
		</view>
		<!-- <template v-for="(item,index) in roleList"> -->
			<view class="menuItem" v-show="roleList.includes('司机')">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							司机办单
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody">
					<view class="item" @click="tapTake">
						<image src="../../static/24gl-box2.png" mode=""></image>
						<view class="name">
							提箱
						</view>
					</view>

					<view class="item" @click="tapBack">
						<image src="../../static/24gl-box.png" mode=""></image>
						<view class="name">
							收箱
						</view>
					</view>

				</view>
			</view>
			
			<view class="menuItem" v-show="roleList.includes('车队') && allow === '1'">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							车队
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody">
					<view class="item" @click="tapCar">
						<image src="../../static/huoche.png" mode=""></image>
						<view class="name">
							指派车辆
						</view>
					</view>
					<view class="item" @click="tapcancelCar">
						<image src="../../static/huoche.png" mode=""></image>
						<view class="name">
							取消指派
						</view>
					</view>
					<!-- <view class="item" @click="allsearch">
						<image src="../../static/search.png" mode=""></image>
						<view class="name">
							重回和空回
						</view>
					</view>
					<view class="item" @click="cancelTeam">
						<image src="../../static/cancelteam.png" mode=""></image>
						<view class="name">
							取消作业
						</view>
					</view> -->
					<!-- <view class="item" @click="billpay">
						<image src="../../static/pay.png" mode=""></image>
						<view class="name">
							办单付费
						</view>
					</view> -->
				</view>
			
			</view>
			
			<view class="menuItem" v-if="roleList.includes('管理员')">
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							权限管理
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody">
					<view class="item" @click="qxgl">
						<image src="../../static/24gl-box2.png" mode=""></image>
						<view class="name">
							权限管理
						</view>
					</view>
				</view>
			</view>

		
			<!-- <view class="menuItem" >
				<view class="menuHead">
					<view class="leftCon">
						<u-icon name="order" color="#51D1E7" size="35"></u-icon>
						<view class="labelName">
							费用支付
						</view>
					</view>
					<view class="rightArrow">
						<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
					</view>
				</view>
				<view class="menuBody"> 
					<view class="item" @click="otherpay">
						<image src="../../static/pay.png" mode=""></image>
						<view class="name">
							在线缴费
						</view>
					</view> 
				</view> 
			</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				list: [{
					// image: '/static/img/bg.jpg'
					image: 'https://api.zlkj-port.com/prod-api/profile/img/bg.jpg'
				}],
				marquee:'',
				roleList: [],
				permit: '', // user的权限
				allow: '',	// portrole的权限
				portname: '',
				tel: '',		// 手机号
				level: '',
				department: '',
				listInfo: []
			};
		},
		computed: {
			...mapState(['activePort', 'userInfo'])
		},
		onLoad(options) {
			this.allow = options.allow
			this.portname = options.portname
			console.log(options)
			this.roleList = uni.getStorageSync("userInfo").roleName.split(',')
			// this.roleList.reverse()	// 数组返转，可以去掉
			this.permit = uni.getStorageSync("userInfo").permit
			this.tel = uni.getStorageSync("userInfo").tel
			uni.request({
				url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/YMss8TNkbNYTNOK',
				method: "get",
				success: (res) => { 
					 this.marquee = res.data.rows[0].MARQUEE
				}
			})
			this.getUser()
		},
		methods: {
			getUser() {
				// 用当前登录人的手机去传
				uni.request({
					url: 'https://api.zlkj-port.com/cygjapi/zlzg/Q/JJVQ4zko1IQ4SZ4?tel=' + this.tel ,
					method: "get",
					success: (res) => {
						console.log(res)
						if (res.data.rows.length > 0) {
							this.listInfo = res.data.rows
							res.data.rows.forEach(item => {
								this.level = item.level
								this.department = item.shr_department
							})
						} else {
							this.listInfo = []
						}
					}
				})
			},
			// 港口预约
			gkyy() {
				uni.navigateTo({
					url: './jgyy?portname=' + this.portname
				})
			},
			// 预约记录
			yyjl() {
				uni.navigateTo({
					url: './toExamine?level=' + this.level + '&department=' + this.department + '&portname=' + this.portname
				})
			},
			boxSearch() {
				uni.navigateTo({
					url: '../driver/boxTrends'
				})
			},
			workShip() {
				uni.navigateTo({
					url: '../driver1/workShip'
				})
			},
			onSideBox() {
				uni.navigateTo({
					url: '../driver1/onSidebox'
				})
			},
			qxgl() {
				uni.navigateTo({
					url: '../driver1/adminManage?portname=' + this.portname
				})
			},
			comeCar() {
				uni.navigateTo({
					url: '../driver1/comeCar'
				})
			},
			tapTake() {
				uni.navigateTo({
					url: './takeBox'
				})
			},
			tapBack() {
				uni.navigateTo({
					url: './backBox'
				})
			},
			yancan() {
				uni.navigateTo({
					url: './yancan'
				})
			},
			czxzp() {
				uni.navigateTo({
					url: './czxzp'
				})
			},
			tapCar() {
				uni.navigateTo({
					url: './sendCar'
				})
			},
			tapcancelCar() {
				uni.navigateTo({
					url:'./cancelCar'
				})
			},
			clickIn(){
				uni.navigateTo({
					url:'./clockin'
				})
			},
			allsearch() {
				uni.navigateTo({
					url:'./allsearch'
				})
			},cancelTeam() {
				uni.navigateTo({
					url:'./cancelTeam'
				})
			},
			sendteam() {
				uni.navigateTo({
					url:'./sendteam'
				})
			},
			sendteamhistory() {
				uni.navigateTo({
					url:'./sendteamhistory'
				})
			},
			billpay() {
				uni.navigateTo({
					url:'../pay/billpay'
				})
			},
			otherpay() {
				uni.navigateTo({
					url:'../pay/otherpay'
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner {}
	/*首页跑马灯效果*/
	@-webkit-keyframes around {
	from {
	   margin-left: 100%;
	}
	to {
	   /* var接受传入的变量 */
	   margin-left: var(--marqueeWidth--);
	}
	}
	@keyframes around {
	from {
	   margin-left: 100%;
	}
	to {
	   /* var接受传入的变量 */
	   margin-left: var(--marqueeWidth--);
	}
	}
	.marquee_container{
	  background-color: #497ac8;
	  height: 50rpx;
	  line-height: 44rpx;
	  position: relative;
	  width: 100%;
	  margin-top:0rpx;
	}
	.marquee_container:hover{
	  /* 不起作用 */
	  -webkit-animation-play-state: paused;
	          animation-play-state: paused;
	}
	.marquee_text{
	  color:#b50000;
	  font-size: 30rpx;
	  display: inline-block;
	  white-space: nowrap;
	  -webkit-animation-name: around;
	          animation-name: around;
	  -webkit-animation-duration: 10s;
	          animation-duration: 10s;  /*过渡时间*/
	  -webkit-animation-iteration-count: infinite;
	          animation-iteration-count: infinite;
	  -webkit-animation-timing-function:linear;
	          animation-timing-function:linear;
	}
	/*首页跑马灯效果*/
	.menuItem {
		width: 710rpx;
		margin: 0 auto;

		.menuHead {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.leftCon {
				display: flex;
				align-items: center;

				.labelName {
					margin-left: 10rpx;
					color: #868887;
				}
			}
		}

		.menuBody {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 50%;
				border: 1rpx solid #EFEFEF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 355rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 30rpx;
					color: #868887;
				}
			}
		}
	}
</style>
